<template>
  <div>
    <div id="graphContainer"></div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

import mxgraph from '@/plugins/mxgraph';

const {
  mxGraph,
  mxClient,
  mxUtils,
  mxCodec,
  mxVertexHandler,
  mxConstants,
  mxCellState,
  mxGraphModel,
  /*......*/
} = mxgraph;


@Component
export default class HomeVue extends Vue {
  mounted() {
    console.log('触发了')
    if (!mxClient.isBrowserSupported()) {
      // 判断是否支持mxgraph
      mxUtils.error('Browser is not supported!', 200, false);
    } else {
      let container = document.getElementById('graphContainer');
      var model = new mxGraphModel();
      var graph = new mxGraph(container, model)


      // Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
      var parent = graph.getDefaultParent();

// Adds cells to the model in a single step
      model.beginUpdate();
      try
      {
        var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
        var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
        var e1 = graph.insertEdge(parent, null, '', v1, v2);

      }
      finally
      {
        // Updates the display
        model.endUpdate();
      }
      /*// 在容器中创建图表

      let MxGraph = mxGraph;
      let MxCodec = mxCodec;
      var graph = new MxGraph(container);
      // 生成 Hello world!
      var parent = graph.getDefaultParent();
      graph.getModel().beginUpdate();
      try {
        var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 200, 80, 30);
        var v2 = graph.insertVertex(parent, null, 'World', 200, 150, 80, 30);
        var v3 = graph.insertVertex(parent, null, 'everyBody!', 300, 350, 60, 60);
        graph.insertEdge(parent, null, '', v1, v2);
        graph.insertEdge(parent, null, '', v2, v3);
        graph.insertEdge(parent, null, '', v1, v3);
      } finally {
        // Updates the display
        graph.getModel().endUpdate();
      }*/
    }
  }
}
</script>
